<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="link_upload_notice" class="mui-icon mui-icon-right-nav mui-pull-right"
				style="color: white;font-size: 14px;line-height: 27px;">发布新公告</a>
			<h1 class="mui-title title-color">已发布公告</h1>
		</header>

		<div class="mui-content">

			<ul class="mui-table-view" id="notice_list" style="margin-bottom: 10px;">
				<!-- <li class="btnOper mui-table-view-cell mui-media"> -->
				<!-- <a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../../images/1.jpg">
						<span class="mui-pull-right">
							<button id="materia_content" type="button" class="passRequest mui-btn mui-btn-green" style="padding: 4px 10px;">查看</button>
						</span>
						<div class="mui-media-body">
							<label>标题:XXX</label>
							<p class="mui-ellipsis">发布日期:2021-03-08 12:20:31</p>
						</div>
					</a> -->
				<!-- </li> -->
			</ul>

		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {
				var user = app.getGlobalUserInfo();
				// 页面跳转 公告管理
				document.getElementById("link_upload_notice").addEventListener("tap", function() {
					mui.openWindow({
						url: "teacherNoticeEdit.html",
						id: "teacherNoticeEdit.html",
						createNew: true
					});
				});

				// 加载公告列表
				var thisWebview = plus.webview.currentWebview();
				thisWebview.addEventListener("show", function() {
					loadingNoticeList();
				});

				// 添加自定义事件，刷新
				window.addEventListener("refresh", function() {
					loadingNoticeList();
				});
			});

			// 加载公告列表
			function loadingNoticeList() {
				var teacher = app.getGlobalUserInfo();

				mui.ajax(app.serverUrl + "/user/teacher/teacher_query_notice?user_id=" + teacher.user_id, {
					data: {},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						if (data.status == 200) {
							var noticeList = data.data;

							var notice_list = document.getElementById("notice_list");

							if (noticeList != null && noticeList.length > 0) {
								var notice_list_html = "";
								for (var i = 0; i < noticeList.length; i++) {
									notice_list_html += noticeListHtml(noticeList[i]);
								}
								notice_list.innerHTML = notice_list_html;
							} else {
								notice_list.innerHTML = "";
							}

							//动态对查看按钮进行事件绑定
							mui(".btnOper").on("tap", ".materia_content_button", function(e) {
								var n_content = this.getAttribute("n_content");
								var n_title = this.getAttribute("n_title");
								noticeDetail(n_content,n_title);
							});
						} else {
							app.showToast("获取数据失败，请重试！", "error");
						}
					}
				});
			}

			// 显示公告详情
			function noticeDetail(n_content,n_title) {
				var btnArray = ['关闭'];
				mui.confirm(n_content, n_title, btnArray, function(e) {})
			}

			// 公告列表html
			function noticeListHtml(notice) {
				var html = "";
				html = '<li class="btnOper mui-table-view-cell mui-media">' +
					'<a href="javascript:;">' +
					'<img class="mui-media-object mui-pull-left" src="../../images/gonggao.jpg">' +
					'<span class="mui-pull-right">' +
					'<button id="materia_content" n_content="' + notice.n_content + '" n_title="' + notice.n_title + '" type="button" class="materia_content_button mui-btn mui-btn-green" style="padding: 4px 10px;">查看</button>' +
					'</span>' +
					'<div class="mui-media-body">' +
					'<label>标题:' + notice.n_title + '</label>' +
					'<p class="mui-ellipsis">发布日期:' + notice.n_date_str + '</p>' +
					'</div>' +
					'</a>' +
					'</li>';
				return html;
			}
		</script>
	</body>

</html>
